<!--发布帖子页面-->
<template>
  <div style="width: 100%;position: relative;height: 5vh">
    <el-row>
      <el-col :span="18">
        <el-input label="标题" placeholder="请输入标题" v-model="blogForm.title"></el-input>
      </el-col>
      <el-col :span="6" style="position: absolute;right: 0;text-align: center;width: 100%">
        <el-button type="primary" round style="align-content: center" @click="sendBlog()">发布</el-button>
        <el-button type="danger" round style="align-content: center" @click="dialogVisible=true">权限</el-button>
        <el-button type="warning" round style="align-content: center" @click="router.push('/home');">返回</el-button>
      </el-col>
    </el-row>
  </div>
  <!--  权限管理弹窗-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;"
             :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-form-item label="帖子类型">
        <el-select v-model="blogForm.type" placeholder="请选择帖子类型">
          <el-option label="求助" value="0"></el-option>
          <el-option label="资源" value="1"></el-option>
          <el-option label="日常" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否允许转发">
        <el-radio-group v-model="blogForm.forwardLimit">
          <el-radio label="是" border value="1" style="margin: 0;"></el-radio>
          <el-radio label="否" border value="0"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否允许评论">
        <el-radio-group v-model="blogForm.commentLimit">
          <el-radio label="是" border value="1" style="margin: 0;"></el-radio>
          <el-radio label="否" border value="0"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
      <template #footer>
        <el-button @click="handleClose()">取消</el-button>
        <el-button type="primary" @click="savePermissions()">保存</el-button>
      </template>
  </el-dialog>
  <div style="border: 1px solid #ccc;height: 95vh;width: 100%">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
    />
  </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, ref, shallowRef, onMounted} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import router from "@/router";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
import {IToolbarConfig} from "@wangeditor/editor";
import {IEditorConfig} from "@wangeditor/editor";
// 模式
const mode = ref("default");
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
//图片上传处理
const toolbarConfig = {} // 工具栏配置
const editorConfig = {  // 编辑器配置
  MENU_CONF: {
    uploadImage: { // 上传图片的配置
      server: `${BASE_URL}/v1/files/upload`, // 上传图片的网址
      fieldName: 'file', // 上传文件的名称
      base64LimitSize: 5 * 1024 * 1024
    }
  }
}
const imgUrl = ref(editorConfig.MENU_CONF.uploadImage.fieldName)
console.log(imgUrl.value);
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = ""
  }, 1500)
})
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor) {
    editor.destroy();
  }
})
// 创建编辑器实例对象
const handleCreated = (editor) => {
  editorRef.value = editor;// 记录 editor 实例，重要！
}

//保存权限
const savePermissions = () => {
  dialogVisible.value = false;
}
//创建对象用来保存发帖信息
const blogForm = ref({
  title: '',
  content: '',
  userId: getUser().id,
  type:'',
  forwardLimit:'1',
  commentLimit:'1',
  fileUrl:''
});
// 发帖子
const sendBlog = () => {
  blogForm.value.content = valueHtml.value;
  // blogForm.value.fileUrl = editorConfig.uploadImgServer
  if (blogForm.value.title.trim() == '' || blogForm.value.content.trim() == '') {
    ElMessage.error('标题和内容不能为空')
  } else {
    let data = qs.stringify(blogForm.value);
    axios.post(BASE_URL + '/v1/blog/insert/', data).then((response) => {
      if (response.data.code === 2000) {
        ElMessage.success('发布成功')
        blogForm.value.title = '';
        blogForm.value.content = '';
        blogForm.value.type='';
        blogForm.value.forwardLimit='1';
        blogForm.value.commentLimit='1';
        router.push('/home')
      } else {
        ElMessage.error('发布失败')
        if (confirm('发布失败，是否重写编写？')) {
          blogForm.value.title = '';
          blogForm.value.content = '';
          blogForm.value.type='';
          blogForm.value.forwardLimit='1';
          blogForm.value.commentLimit='1';
        }
      }
    })
  }
}
// 控制弹窗是否显示
const dialogVisible = ref(false)
// 弹窗标题
const dialogTitle = ref('权限管理')
// 取消弹窗
const handleClose=()=>{
  if (confirm('确定关闭弹窗吗？')){
    dialogVisible.value=false;
    blogForm.value.type='';
    blogForm.value.forwardLimit='1';
    blogForm.value.commentLimit='1';
  }
}
</script>

<style scoped>

</style>